<template>
  <el-card>
    <div slot="header" class="df jcsb aic">
      <span>商品分类</span>
      <el-button type="primary">添加分类</el-button>
    </div>
    <!-- table表格 -->
    <el-table :data="tableData">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
          <el-input v-else size="mini" v-model="scope.row.cateName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            :disabled="!scope.row.isEdit"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            style="margin-right: 5px"
            size="mini"
            @click="handleEdit(scope.row)"
            :type="scope.row.isEdit ? 'success' : 'default'"
          >
            {{ scope.row.isEdit ? '完成' : '编辑' }}
          </el-button>

          <el-button size="mini" @click="handleDel(scope.row)" type="danger">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt20"
      :page-size="pageSize"
      :total="total"
      :current-page="currentPage"
      @size-change="handleSizeChange"
      :page-sizes="[3, 5]"
      @current-change="handleCurrentChange"
      background
      layout="total,sizes,prev,pager,next,jumper"
    ></el-pagination>
  </el-card>
</template>

<script>
import {getGoodsListReq, editGoodsCateReq, delGoodsCateReq} from '@/api/goods'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 3,
      total: 0,
    }
  },
  methods: {
    async getData() {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      //发送请求
      let res = await getGoodsListReq({
        currentPage,
        pageSize,
      })
      //解构数据
      let {total, data} = res.data
      //修改数据
      data.forEach(v => {
        //把state转换为布尔值
        v.state = v.state === 1 ? true : false
        //添加一个字段 是否可编辑
        v.isEdit = false
      })
      this.total = total
      this.tableData = data

      //如果获取data为[] 且currentPage>1 退回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },
    //改变显示条数
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    //编辑
    async handleEdit(row) {
      //把可编辑状态取反
      row.isEdit = !row.isEdit
      //发送请求
      if (!row.isEdit) {
        // 发送请求
        let res = await editGoodsCateReq({
          ...row,
          state: row.state ? 1 : 0,
        })
      }
    },
    //删除
    async handleDel(row) {
      console.log('row', row)
      let {id} = row
      let res = await delGoodsCateReq({id})
      let {code} = res.data
      if (code === 0) {
        this.getData()
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
  },
  //初始化发送请求
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped></style>
